<template>
  <div style="background-color: white">
    <carousel :carouselList="carouselList"></carousel>
    <!-- <el-carousel class="index-swiper" height="618px">
      <el-carousel-item class="index-swiper" v-for="(item, key) in 4" :key="key">
        <div>
          <el-image
            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
            class="index-swiper"
            fit="cover"
          ></el-image>
        </div>
      </el-carousel-item>
    </el-carousel> -->
    <div class="index-body" style="padding-bottom: 50px">
      <div style="padding: 0 88px">
        <div style="display: flex; justify-content: end; margin-top: 30px">
          <div style="font-size: 14px; color: #666666">
            <span style="cursor: pointer" @click="$router.push('/index')">{{
              $store.state.locale == "zh-cn" ? "首页" : "Home"
            }}</span>
            >
            <span style="font-weight: bold; color: #333333">{{
              $store.state.locale == "zh-cn" ? "品牌故事" : "Brand Story"
            }}</span>
          </div>
        </div>
        <div style="margin-top: 40px; display: flex; align-items: center">
          <div style="min-width: 600px; height: 400px">
            <img
              :src="info.introduce.image"
              alt=""
              style="width: 600px; height: 400px; object-fit: cover"
            />
            <!-- <el-image
              :src="info.introduce.image"
              style="width: 600px; height: 400px"
              fit="cover"
            ></el-image> -->
          </div>
          <div
            style="
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              margin-left: 50px;
              width: 100%;
            "
          >
            <div style="font-weight: bold; font-size: 24px">
              {{ $store.state.locale == "zh-cn" ? "品牌故事" : "Brand Story" }}
            </div>
            <div
              class="ellipsis2"
              style="
                margin-top: 30px;
                font-size: 16px;
                line-height: 34px;
                text-indent: 2em;
              "
            >
              {{ info.introduce.info }}
            </div>
            <div style="margin-top: 40px">
              <div
                class="more"
                @mouseenter="mouseenterMore(1)"
                @mouseleave="mouseleaveMore()"
                @click="detail()"
                style="
                  cursor: pointer;
                  padding: 8px 16px;
                  border-radius: 5px;
                  border: 1px solid #000000;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                <div style="font-size: 14px" class="text">
                  {{ $store.state.locale == "zh-cn" ? "了解更多" : "Explore More" }}
                </div>
                <div style="width: 20px; height: 14px; margin-left: 5px; display: flex">
                  <img
                    v-if="moreId == 1"
                    src="@/assets/img/arrow-w-right.png"
                    style="width: 20px; height: 14px"
                    alt=""
                  />
                  <img
                    v-else
                    src="@/assets/img/arrow-b-right.png"
                    style="width: 20px; height: 14px"
                    alt=""
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div style="width: 100%; height: 4px; background: #dfe5e8; margin: 30px 0"></div>
        <div id="ppls">
          <div style="font-size: 24px; font-weight: bold">
            {{ $store.state.locale == "zh-cn" ? "品牌历史" : "Brand History" }}
          </div>
          <div style="height: 500px; overflow-y: auto; margin-top: 48px">
            <!-- <el-image
              src="https://jy-shops.oss-cn-beijing.aliyuncs.com/0dwgw/goods-emtpy.png"
              style="width: 100%; height: 618px"
              fit="cover"
              :lazy="true"
            ></el-image> -->
            <div v-html="info.history.content"></div>
          </div>
        </div>
        <div style="width: 100%; height: 4px; background: #dfe5e8; margin: 30px 0"></div>
        <!-- 企业文化 -->
        <div id="qywh">
          <div style="">
            <div
              style="display: flex; justify-content: space-between; align-items: center"
            >
              <div style="font-size: 24px; font-weight: bold">
                {{ $store.state.locale == "zh-cn" ? "企业文化" : "Corporate Culture" }}
              </div>
              <div>
                <div
                  class="more"
                  @mouseenter="mouseenterMore(2)"
                  @mouseleave="mouseleaveMore()"
                  @click="detail()"
                  style="
                    cursor: pointer;
                    padding: 8px 16px;
                    border-radius: 5px;
                    border: 1px solid #000000;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  "
                >
                  <div style="font-size: 14px" class="text">
                    {{ $store.state.locale == "zh-cn" ? "了解更多" : "Explore More" }}
                  </div>
                  <div style="width: 20px; height: 14px; margin-left: 5px; display: flex">
                    <img
                      v-if="moreId == 2"
                      src="@/assets/img/arrow-w-right.png"
                      style="width: 20px; height: 14px"
                      alt=""
                    />
                    <img
                      v-else
                      src="@/assets/img/arrow-b-right.png"
                      style="width: 20px; height: 14px"
                      alt=""
                    />
                  </div>
                </div>
              </div>
            </div>
            <div style="font-size: 16px; margin-top: 24px">
              {{
                $store.state.locale == "zh-cn"
                  ? "足够的热爱与心中的信仰，匠心的积淀与科技的创新将支持着多威一直强无止境，永不止步"
                  : "Sufficient love and faith in the heart, as well as the accumulation of craftsmanship and technological innovation, will support DO-WIN to remain strong and never stop."
              }}
            </div>
          </div>
          <div style="margin-top: 40px; position: relative">
            <el-image
              :src="info.culture.image"
              fit="cover"
              style="width: 100%; height: 500px"
            ></el-image>
            <!-- <div v-html="info.culture"></div> -->
            <div
              style="
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                display: flex;
                height: 100%;
              "
            >
              <div
                style="
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                  flex: 1;
                  color: white;
                  height: 100%;
                "
                class="masks"
              >
                <div>
                  <img src="@/assets/img/1.png" style="width: 40px; height: 40px" />
                </div>
                <div style="font-size: 18px; font-weight: bold; margin-top: 26px">
                  {{ $store.state.locale == "zh-cn" ? "品牌使命" : "Brand Mission" }}
                </div>
                <div
                  style="margin-top: 10px; line-height: 28px"
                  v-if="$store.state.locale == 'zh-cn'"
                >
                  BRAND MISSION
                </div>
                <div
                  style="
                    margin-top: 16px;
                    font-size: 15px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                  "
                >
                  <span>
                    {{
                      $store.state.locale == "zh-cn"
                        ? "让专业更专业"
                        : "Make the profession more professional"
                    }}</span
                  >

                  <span style="margin-top: 10px">{{
                    $store.state.locale == "zh-cn"
                      ? "让大众更快乐"
                      : "Make the masses happier"
                  }}</span>
                </div>
              </div>
              <div
                class="masks"
                style="
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                  flex: 1;
                  color: white;
                "
              >
                <div>
                  <img src="@/assets/img/2.png" style="width: 40px; height: 40px" />
                </div>
                <div style="font-size: 18px; font-weight: bold; margin-top: 26px">
                  {{ $store.state.locale == "zh-cn" ? "品牌愿景" : "Brand Vision" }}
                </div>
                <div
                  style="margin-top: 10px; line-height: 28px"
                  v-if="$store.state.locale == 'zh-cn'"
                >
                  BRAND VISION
                </div>
                <div style="margin-top: 16px; font-size: 15px">
                  {{
                    $store.state.locale == "zh-cn"
                      ? "成为运动者最好的伙伴"
                      : "Becoming the best partner for athletes"
                  }}
                </div>
              </div>
              <div
                class="masks"
                style="
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                  flex: 1;
                  color: white;
                "
              >
                <div>
                  <img src="@/assets/img/3.png" style="width: 40px; height: 40px" />
                </div>
                <div style="font-size: 18px; font-weight: bold; margin-top: 26px">
                  {{ $store.state.locale == "zh-cn" ? "核心价值观" : "" }}
                </div>
                <div style="margin-top: 10px; line-height: 28px">CORE VALUES</div>
                <div style="margin-top: 16px; font-size: 15px">
                  <div v-if="$store.state.locale == 'zh-cn'">创造价值 知行合一</div>
                  <div
                    v-else
                    style="display: flex; flex-direction: column; align-items: center"
                  >
                    <span>Integrating knowledge</span>
                    <span style="margin-top: 10px">Action to create value</span>
                  </div>
                  <!-- {{
                    $store.state.locale == "zh-cn"
                      ? "创造价值 知行合一"
                      : `Integrating knowledge action to create value`
                  }} -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <div style="width: 100%; height: 4px; background: #dfe5e8; margin: 30px 0"></div>
        <!-- 社会责任 -->
        <div id="shzr">
          <div style="display: flex; justify-content: space-between; align-items: center">
            <div style="font-size: 24px; font-weight: bold; line-height: 42px">
              {{ $store.state.locale == "zh-cn" ? "社会责任" : "Social Responsibility" }}
            </div>

            <div>
              <div
                class="more"
                @mouseenter="mouseenterMore(3)"
                @mouseleave="mouseleaveMore()"
                @click="detail()"
              >
                <div style="font-size: 14px" class="text">
                  {{ $store.state.locale == "zh-cn" ? "了解更多" : "Explore More" }}
                </div>
                <div style="width: 20px; height: 14px; margin-left: 5px; display: flex">
                  <img
                    v-if="moreId == 3"
                    src="@/assets/img/arrow-w-right.png"
                    style="width: 20px; height: 14px"
                    alt=""
                  />
                  <img
                    v-else
                    src="@/assets/img/arrow-b-right.png"
                    style="width: 20px; height: 14px"
                    alt=""
                  />
                </div>
              </div>
            </div>
          </div>
          <div style="margin-top: 30px">
            <el-carousel
              height="430px"
              type="card"
              class="carousel"
              indicator-position="none"
            >
              <el-carousel-item v-for="(item, key) in info.csrList" :key="key">
                <div style="box-shadow: 0px 0px 14px 0px rgba(96, 96, 96, 0.4)">
                  <el-image
                    :src="item.image"
                    style="width: 100%; height: 400px; display: block"
                    fit="cover"
                    :preview-src-list="srcList"
                  ></el-image>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import carousel from "@/components/carousel.vue";
export default {
  components: {
    carousel,
  },
  data() {
    return {
      srcList: [
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
      ],
      name: "",
      carouselList: [],
      classify: "introduce",
      info: {
        brand: {},
        csrList: [], //社会责任
        history: {}, //品牌历史
        culture: {}, //企业文化
        introduce: {}, //品牌故事
      },
      moreId: 0,
    };
  },
  computed: {
    language() {
      return this.$store.state.locale;
    },
  },
  mounted() {
    this.name = this.$route.query.name;
    this.$nextTick(() => {
      this.scrollIntoView();
    });
    this.getCarousel();
    this.getData();
    this.getBrand();
    this.getCsr();
  },
  watch: {
    $route(to, from) {
      console.log(23232);
      this.name = this.$route.query.name;

      this.$nextTick(() => {
        this.scrollIntoView();
      });
      // 在mounted函数执行的方法，放到该处
      // 加载页面数据的方法
    },
  },
  methods: {
    mouseenterMore(id) {
      this.moreId = id;
      this.$forceUpdate();
    },
    mouseleaveMore() {
      this.moreId = 0;
      this.$forceUpdate();
    },
    //社会责任
    getCsr() {
      this.ajaxs("index/csr?translate=" + this.language, {
        data: {
          limit: 10,
          page: 1,
        },
        success: (res) => {
          this.info.csrList = res.data.data;
          for (let i = 0; i < this.info.csrList.length; i++) {
            this.srcList.push(this.info.csrList[i].image);
          }
        },
      });
    },
    //品牌故事
    getBrand() {
      this.ajaxs("brand/story?translate=" + this.language, {
        success: (res) => {
          //this.info.brand = res.data;
          //  this.info.goodsData = res.data.data;
        },
      });
    },
    getData() {
      this.ajaxs("brand/index?translate=" + this.language, {
        data: {
          classify: this.classify,
        },
        success: (res) => {
          this.info.culture = res.data.culture;
          this.info.history = res.data.history;
          this.info.introduce = res.data.introduce;
        },
      });
    },
    getCarousel() {
      this.ajaxs("index/slides?translate=" + this.language, {
        data: {
          classify: 7,
        },
        success: (res) => {
          this.carouselList = res.data;
        },
      });
    },
    scrollIntoView() {
      if (!this.name) return;
      var element;
      console.log(this.name);

      if (this.name == "品牌历史") {
        element = document.getElementById("ppls");
      }
      if (this.name == "企业文化") {
        element = document.getElementById("qywh");
        this.classify = "culture";
      }
      if (this.name == "社会责任") {
        element = document.getElementById("shzr");
        this.classify = "history";
      }
      var headerOffset = 120;
      var elementPosition = element.offsetTop;
      var offsetPosition = elementPosition - headerOffset;
      console.log(offsetPosition);

      document.documentElement.scrollTop = offsetPosition;

      document.body.scrollTop = offsetPosition;
      console.log(222);
    },
    detail() {
      this.$router.push("/brand/detail");
    },
  },
};
</script>
<style scoped>
@import "../../assets/css/index/index.css";
.masks:hover {
  background: rgba(221, 41, 41, 0.5);
}
.carousel /deep/ .el-carousel__container .el-carousel__arrow--left {
  width: 55px !important;
  height: 55px !important;
  font-size: 24px;
}
.carousel /deep/ .el-carousel__container .el-carousel__arrow--right {
  width: 55px !important;
  height: 55px !important;
  font-size: 24px;
}
.carousel /deep/ .el-carousel__item--card.is-active {
  /* box-shadow: 0px 0px 14px 0px rgba(96, 96, 96, 0.5); */
  /* box-shadow: 0px -5px 10px 0px #ff0000, -6px 0px 6px 0px #3bee17, 6px 0px 6px 0px #2279ee,
    0px 5px 19px 0px #eede15; */
  padding: 10px;
}
.ellipsis2 {
  overflow: hidden;
  text-overflow: ellipsis;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
}

.more {
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 5px;
  border: 1px solid #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.more::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: #000000;
  -webkit-transition: all 0.8s ease;
  transition: all 0.8s ease;
  color: white;
}
.more .text {
  position: relative;
  z-index: 2;
}
.more img {
  position: relative;
  z-index: 2;
}
.more:hover {
  position: relative;
  z-index: 2;
  color: white;
}
.more:hover:after {
  right: initial;
  left: 0;
  width: 100%;
}
</style>
